我們在 Vue 專案時常會想把共用或是常用的可抽象層抽出來寫，一般有三種方式:

1.Component
2.Mixin
3.Prototype

我們常會依功能做成獨立元件，再來重複使用元件，讓我們回想一下前幾天鐵人發文介紹的，元件可以 bind 入一些 props，也可以 $emit 傳出事件，在父層使用 v-slot 改寫模板，傳入元件安插好的插槽，讓元件靈活運用，你想用一百次都不是問題。

元件的使用在我之前文章有介紹過了，然而我們很常需要在函數、數據上重複呼叫再利用，這時候 Mixin、Prototype 就現身了。

首先，我們先來介紹Mixin，混入的部分有分全域的混入，與局部的混入，使用時機端看是否會全局的複用，如errorHandle、toastMessage、loadingMask，或是在局部元件複用而已。

全域混入

import Vue from 'vue'
Vue.mixin({
  methods: { 
      someReuseFunction () {
          //..
      }
  }
})

或者

import Vue from 'vue'
import GlobalMixin from './XXX'
Vue.mixin(GlobalMixin)
// define your single file mixins: GlobalMixin.vue

局部混入

import LocalMixin from './XXX'
export default {
  mixins: [ LocalMixin ]
  // code..
}
// define your single file mixins: LocalMixin.vue

當我們在使用混入的時候須注意到幾點:

1.同名的生命週期鉤子，混入與元件都將被調用，混入對象的鉤子會在元件之前調用。
2.data在元件與混入之間發生衝突時，會以元件的data為優先。
3.若是像Methods、Components 或 Directives名稱衝突時，合併策略會以元件對象為優先。
P.S:Vue.extend()也使用同樣的策略進行合併。
我們也可以自訂義合併策略

所以全局的混入在使用上就要格外的謹慎小心啊，命名規則我習慣帶入混入的namespace當作前綴，如:commomMixin_errorHandle()，甚至於混入的私有函數命名，則應該加上$_當作前綴，如:$_myGreatMixin_update()

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang